import styles from "./index.less"
import {BorderBox8} from '@jiaminghi/data-view-react'
import * as echarts from "echarts"
import {useRef,useState,useEffect} from "react"
const Datum=()=>{
    const getLastWeekDates = () => {
        const today = new Date();
        const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let i = 0; i < 7; i++) {
            const date = new Date(lastWeek.getTime() + i * 24 * 60 * 60 * 1000);
            dates.push(date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }));
        }
        return dates;
    };
    const chartRef=useRef()
    const [data, SetData] = useState(getLastWeekDates())
    const [process,setProcess] =useState([120, 150, 140, 80, 70, 110, 130])
    const [newData,setNewData]=useState(()=>{
        let data=[]
        for(let i=0;i<7;i++){
            data.push(Math.ceil(Math.random()*17+6))
        }
        return data
    })
    const [oldData,setOldData]=useState(()=>{
        let data=[]
        for(let i=0;i<7;i++){
            data.push(Math.ceil(Math.random()*18+11))
        }
        return data
    })
    useEffect(() => {
        const myChart = echarts.init(chartRef.current);
        let option;
        option = {
            xAxis: {
                type: 'category',
                data: data,
                boundaryGap: true,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全,
                    margin: 15
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: { //多条横线
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)",
                        type: [10, 10],
                        dashOffset: 5
                    }

                },
            },
            grid: {
                left: "0%",
                top: "15%",
                right: "0%",
                bottom: "32px"
            },
            series: [
                {
                    data: oldData,
                    type: 'scatter',
                    smooth: true,
                    symbolSize:8,
                    itemStyle: {
                        color: '#FFBB00'
                    },
                    splitArea: {
                        show: true
                    }
                },
                {
                    data: newData,
                    type: 'scatter',
                    smooth: true,
                    symbolSize:8,
                    itemStyle: {
                        color: '#73F8FA'
                    },
                    splitArea: {
                        show: true
                    }
                },
                {
                    data: [newData[0]*1.5, newData[1]*1.5, newData[2]*1.5, newData[3]*1.5, newData[4]*1.5, newData[5]*1.5, newData[6]*1.5],
                    type: 'bar',
                    barWidth: '5%',
                    itemStyle: {
                        barBorderRadius: 20,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(115, 248, 250, 1)' // 100% 处的颜色

                        }, {
                            offset: 1,
                            color: 'rgba(255, 255, 255, 0)' // 0% 处的颜色
                        }], false),
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    }, [])
    return(
        <div className={styles.container}>
           <BorderBox8 reverse="{true}" dur={6}>
               <div className={styles.content}>
                   <div className={styles.top}>
                       <div className={styles.ChTitle}>数据泄露</div>
                       <div className={styles.EnTitle}>// Data Leakage</div>
                   </div>
                   <div className={styles.statistics}>
                    <div className={styles.left}>
                        <div className={styles.number}>37</div>
                        <div className={styles.text}>7日已处理</div>
                    </div>
                       <div className={styles.line}></div>
                       <div className={styles.right}>
                           <div className={styles.number}>18</div>
                           <div className={styles.text}>待处理</div>
                       </div>
                   </div>
                   <div>
                       <div className={styles.chart} ref={chartRef}></div>
                   </div>
               </div>
           </BorderBox8>
        </div>
    )
}
export default Datum